<template>
    <!--每一个组件名称就是一个类名-->
    <el-container class="home-container">
        <!--页面容器的头部区-->
        <el-header>
            <div>
                <img src="../assets/shoppingcart.jpg" alt="">
                <span>超市供销存管理系统</span>
            </div>
            <el-button type="info" @click="logout">退出</el-button>

        </el-header>
        <!--页面主体区-->
        <el-container>
            <!--侧边栏-->
            <el-aside width="200px">
                <!--侧边栏菜单区域-->
                <!--:router="true" 点击菜单栏跳转到指定路径-->
                <el-menu
                        background-color="#333744"
                        text-color="#fff"
                        active-text-color="#409FFF" :unique-opened="true" :collapse="isCollapse" :collapse-transition="false" :router="true" :default-active="activePath">

                <!--一级菜单-->
                    <el-submenu :index="item.ID + ''" v-for="item in menulist" :key="item.ID">
                        <!--一级菜单的模板区-->
                        <template slot="title">
                            <!--图标-->
                            <i class="el-icon-location"></i>
                            <!--文本-->
                            <span>{{ item.menuname}}</span>
                        </template>
                        <!--二级菜单-->
                        <el-menu-item :index="'/' + item.path" @click="saveNavState('/' + item.path)">
                            <template slot="title">
                                <!--图标-->
                                <i class="el-icon-menu"></i>
                                <!--文本-->
                                <span> {{ item.children }} </span>
                            </template>
                        </el-menu-item>
                        <!-- 二级菜单-->
                        <template>
                            <el-menu-item :index="'/' + item.subpath" @click="saveNavState('/' + item.subpath)" v-if="item.subpath !== 'wu'">
                                <template slot="title" >
                                    <i class="el-icon-menu"></i>
                                    <span> {{ item.subchildren }} </span>
                                </template>
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <!--右侧主体页面-->
            <el-main>
                <!--路由占位符-->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>

</template>


<!--行为区-->
<script>
    export default {
        data () {
            return {
                // 左侧菜单数据
                menulist: [],
                isCollapse: false,
                // 被激活的链接
                activePath: ''
            }
        },
        created () {
            this.getMenuList()
            this.activePath = window.sessionStorage.getItem('activePath')
        },
        methods: {
            logout () {
                window.sessionStorage.clear()
                this.$router.push('/login')
            },
            async getMenuList () {
                const { data: res } = await this.$http.get('/menus')
                if (res.code !== 20000) return this.$message.error(res.msg)
                this.menulist = res.data
            },
            // 点击切换折叠和展开
            toggleCollapse () {
                this.isCollapse = !this.isCollapse
            },
            // 保存链接的激活状态
            saveNavState (activePath) {
                window.sessionStorage.setItem('activePath', activePath)
                this.activePath = activePath
            }
        }
    }
</script>



<!--样式区-->
<style lang="less" scoped>
    //让container撑满整个页面
    .home-container{
        height: 100%;
    }
    .el-header {
        background-color: #383838;
        display: flex;
        justify-content: space-between;
        padding-left: 0; //图标贴着左边对其
        align-items: center; //按钮不贴边   居中
        color: white; //文本的颜色
        font-size: 20px;
        > div {  //嵌套给文本进行位置修改
            display: flex;
            align-items: center;
            span {
                margin-left: 15px; //文本和图片的间距像素大小
            }
        }

    }
    .el-aside {
        background-color: #474747;
        .el-menu {
            border-right: none;
        }

    }
    .el-main {
        background-color: white;
        text-align: center;

    }

    .home-container {
        height: 100%;
    }
    .toggle-button {
        background-color: #4A5064;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        text-align: center;
        letter-spacing: 0.3em;
        cursor: pointer;
    }

</style>
